import React, { Component } from 'react';

import axios from 'axios';

import { connect } from 'react-redux';

import * as types from './store/types'

class App extends Component {

  componentDidMount(){

    this.props.getBannerList()
    this.props.getProList()

  }

  render() {
    return (
      <div>
        {this.props.bannerList.map(item => {
          return (<p key={item.bannerid}>
            <img src={item.img} style={{height: 100}} alt="" />
          </p>)
        })}

        {this.props.proList.map(item => {
          return (<p key={item.proid}> {item.proname} </p>)
        })}

      </div>
    );
  }
}

// 将全局状态中的数据添加到 props 中
const mapStateToProps = (state)=>{
  return {
    bannerList: state.pro.bannerList,
    proList: state.pro.proList
  }
}

// 将修改全局状态的方法添加到 props
const mapDispatchToProps = (dispatch)=>{
  return {
    getBannerList(){
      axios.get('/banner/list').then(res => {
        // 需要将请求到的数据放在全局状态管理中
        dispatch({type: types.CHANGE_BANNER_LIST, payload: res.data.data})
      })
    },
    getProList(){
      axios.get('/pro/list').then(res => {
        dispatch({type: types.CHANGE_PRO_LIST, payload: res.data.data})
      })
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);
